<template>
  <div class="page">
    <!-- 首页导航 -->
    <div class="page-header">
      <div class="header-content">
        <div class="logo">
          <img src="../assets/logo.png" alt="" />
        </div>
        <div class="nav-list">
          <div
            v-for="(item, index) in navList"
            class="nav-item"
            @click="tabFn(item)"
            :key="index"
          >
            {{ item.title }}
          </div>
          <div class="user-info" @click="toUser">
            <div class="user-icon"></div>
            用户名
          </div>
        </div>
      </div>
    </div>
    <headerTemp class="headerTemp" v-if="headerTempFlag"></headerTemp>
    <div class="page-min">
      <!-- <div class="page-menu">
        <menuTemp @selectNav="selectNav"></menuTemp>
      </div> -->
      <div class="page-content">
        <div class="content-view">
          <router-view></router-view>
          <footerTmp></footerTmp>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, toRefs, reactive } from "vue";
import menuTemp from "../components/menuTemp.vue";
import footerTmp from "../components/footer/index.vue";
import { getSession } from "@/utils/index";
import { useRouter } from "vue-router";
const router = useRouter();
let headerTempFlag = ref(false);
let state = reactive({
  navList: [
    {
      title: "首页",
      path: "/index",
    },
    {
      title: "产品",
      path: "/productIndex",
    },
    {
      title: "会员购买",
      path: "/evstore",
    },
    {
      title: "帮助",
      path: "/helpCenter",
    },
  ],
});

const { navList } = toRefs(state);
let navTitle = ref(getSession("navTitle") || "练习");

/**
 * 切换左边菜单
 */
function selectNav() {
  navTitle.value = getSession("navTitle") || "练习";
}

function tabFn(item) {
  // if (item.title == "产品") {
  //   headerTempFlag.value = !headerTempFlag.value;
  // } else {
  router.push(item.path);
  // }
}
function toUser() {
  router.push("/user");
}
</script>

<style lang="less" scope>
.page {
  height: 100%;
  .page-header {
    display: flex;
    align-items: center;
    position: relative;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    text-align: center;
    color: #333333;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
    .header-content {
      width: 1200px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .logo {
      width: 161px;
      height: 28px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .nav-list {
      display: flex;
      align-items: center;
      .nav-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 54px;
        padding: 0 32px;
        font-size: 16px;
        cursor: pointer;
      }
      .nav-item:hover {
        color: #4a90e2;
      }
      .user-info {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333333;
        text-align: justify;
        font-weight: 400;
        .user-icon {
          width: 26px;
          height: 26px;
          margin-right: 10px;
          background-image: url(https://ctpublic.ieway.cn/public/v5/imgs/shoppingcenter/okloginlogo.png);
        }
      }
    }
  }
  .headerTemp {
    position: fixed;
    top: 50px;
    z-index: 999;
  }
  .page-min {
    height: calc(100vh - 80px);
    display: flex;
    align-items: flex-start;
    margin-top: 54px;
    .page-content {
      width: 100%;
      // flex: 9;
      .content-header {
        margin-bottom: 20px;
        color: #696969;
        .close {
          color: #1e90ff;
        }
      }
      .content-view {
      }
    }
  }
}
</style>
